import './Scss/BeamMap.scss'
import { useRequest, useEventEmitter, useBoolean } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { useEffect, useState, useRef } from 'react'
import { Initialization, InitializationData } from '../../../../Common/Mars3d/Initialization'
import { project } from '../../../../Common/Data'
import { LargeScreenTablesModal } from '../../Common/LargeScreen/LargeScreenModal'
import { WebTemplateUrl } from './configuration'

const { imageUrl } = project[window.location.hostname]
const { mars3d } = window

const colorList = {
    钢筋骨架安装: '#FFCB4F',
    混凝土浇筑: '#559DFF',
    养生: '#5AAC5A',
    张拉: '#885BDC',
    压浆: '#D77A3C',
    空闲: '#C6C6C6',
}
const colorMapping = {
    'a4d024c8-8690-47b0-a6a4-ecdd80270ace': '#FFCB4F',
    'bb2e31a1-c545-421e-9dc4-68ffc13b11ba': '#559DFF',
    'c5dc969a-7e5a-472c-a09b-c94c8f0ac112': '#5AAC5A',
    'ed5d8730-cec9-4525-954e-79284180820f': '#885BDC',
    'f71ec076-1917-46f9-9bab-bce0292706a9': '#D77A3C',
    'f71ec076-1917-46f9-9bab-bce0292706a8': '#C6C6C6',
}

const Bottom = ({ data }) => {
    return (
        <div className="Bottom">
            {data.map(({ uuid, processName, color, processNameCount }) => (
                <div key={`BottomKey${uuid}`}>
                    <div style={{ background: color }} />
                    <div>{processName}: </div>
                    <div> {processNameCount}</div>
                </div>
            ))}
        </div>
    )
}

export const BeamMap001 = ({ uuid, Active }) => {
    const Mars3dBox = useRef()
    const [boxData, setBoxData] = useState()

    const [Gra, setGra] = useState()
    const [Map, setMap] = useState()
    const [filesList, setFilesList] = useState([])

    const { runAsync: getScenesDetails } = useRequest(Http, { manual: true })
    const { runAsync: getBeamSeatBeamModel } = useRequest(Http, { manual: true })
    const { run: getScenes } = useRequest(Http, {
        manual: true,
        onSuccess: res => Initialization(res, Mars3dBox, InitializationEvent),
    })
    useEffect(() => {
        getScenesDetails({ url: `getGetBeamSeatBeamModel` }).then(({ list }) => {
            getScenes({ url: `getScenesID`, path: [uuid] })
        })
    }, [getScenes, getScenesDetails, uuid])

    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [Parameter, setParameter] = useState()
    const [ParamTitle, setParamTitle] = useState()

    const InitializationEvent = useEventEmitter()
    InitializationEvent.useSubscription(({ map, gra, uuid }) => {
        getScenesDetails({ url: `getScenesDetailsUuid`, path: [uuid] }).then(res => {
            setFilesList(res.files)
            InitializationData(map, gra, res)
            setGra(gra)
            setMap(map)
            getScenesDetails({ url: `getGetBeamSeatProcessName` }).then(({ list }) => {
                const { table, table1 } = list
                table.forEach(item => {
                    const style = { url: item.modelUrl, heading: item.heading, fill: true }
                    style.color = colorList[item.processName]
                    gra.getGraphicById(item.tableName).show = true
                    gra.getGraphicById(item.tableName).style = style
                })
                table1.forEach(item => {
                    if (colorMapping[item.uuid]) item.color = colorMapping[item.uuid]
                })
                setBoxData(table1)
            })
        })

        getBeamSeatBeamModel({ url: 'getBeamSeatBeamModel', data: { componentType: 2 } }).then(res => {
            const ModalList = res.list.map(item => item.tableName)
            gra.on('click', ({ graphic }) => {
                const { type } = graphic
                if (type === 'model' && ModalList.indexOf(graphic.uuid) !== -1) {
                    const getInnerHtml = () =>
                        `<div class='BeamModalBox'>
                            <div id='fou'> <img src='${imageUrl}itemButton.png' /> 基本信息 </div>
                            <div id='two'> <img src='${imageUrl}itemButton.png' /> 智能张拉 </div>
                            <div id='thr'> <img src='${imageUrl}itemButton.png' /> 智能压浆 </div>
                        </div>`
                    graphic.on(mars3d.EventType.popupOpen, ({ container }) => {
                        const two = container.querySelector('#two')
                        const thr = container.querySelector('#thr')
                        const fou = container.querySelector('#fou')
                        if (two)
                            two.addEventListener('click', () => {
                                setParamTitle('智能张拉')
                                setParameter({
                                    uuid: '02160662-B245-4689-A007-040A0B763011',
                                    type: 'TensioningModal',
                                    classification: 'SecondaryPersonnelTemplate',
                                })
                                graphic.closePopup()
                                setTrue()
                            })
                        if (thr)
                            thr.addEventListener('click', () => {
                                setParamTitle('智能压浆')
                                setParameter({
                                    uuid: '02160662-B245-4689-A007-040A0B763011',
                                    type: 'GroutingModal',
                                    classification: 'SecondaryPersonnelTemplate',
                                })
                                graphic.closePopup()
                                setTrue()
                            })
                        if (fou)
                            fou.addEventListener('click', () => {
                                // setItemType(`${imageUrl}基本信息.png`)
                                graphic.closePopup()
                                // setTrue()
                            })
                    })
                    // 绑定Popup
                    setTimeout(() => graphic.bindPopup(getInnerHtml).openPopup(), 10)
                } else if (type === 'label') {
                    console.log('点击小标签')
                }
            })
        })
    })

    return (
        <div className="BeamMap001">
            <div className="BeamMap" ref={Mars3dBox} />
            <img src={WebTemplateUrl + 'Mask.png'} alt="" />
            {boxData && <Bottom data={boxData} />}
            {TowModal && Parameter && (
                <LargeScreenTablesModal className="ItemTitle" Off={setFalse} title={ParamTitle} parameter={Parameter} />
            )}
        </div>
    )
}
